<!--<template>-->
<!--    <div>-->
<!--        <h2>请输入你的问题</h2>-->
<!--        <el-input  v-loading="loading" v-model="qs" type="textarea" style="width: 500px;margin-right: 10px;"/>-->
<!--        -->
<!--        <el-button type="success" @click="send_qs">发送</el-button>-->
<!--    </div>-->
<!--    <div>-->
<!--        <h2>会话框</h2>-->
<!--        <div v-for="item,key in mes" :key="key">-->
<!--            <el-input :value="item" type="textarea" style="width: 500px;margin-right: 10px;" disabled/>-->
<!--        </div>-->
<!--        -->
<!--    </div>-->
<!--</template>-->
<template>
  <div class="chat-container">
    <div class="chat-header">
      <el-input
          v-loading="loading"
          v-model="qs"
          type="textarea"
          class="chat-input"
          placeholder="请输入你的病情描述"
          :rows="4"
          @keyup.enter="send_qs"
      />
    </div>
    <div class="chat-messages">
      <h2>会话框</h2>
      <div v-for="(item, key) in mes" :key="key" class="message-item">
        <div class="message-content">
          <p class="message-input">{{ item }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

let qs = ref('')
let qsList = ref([])
let mes = ref([])
let loading = ref(false)

const send_qs=()=>{
    qsList.value.push(qs.value)
    mes.value.push(`提问：${qs.value}`)
    loading.value = true
    if (qs.value != "" && qs.value != null) {
        let token = localStorage.access_token
        axios.post("http://127.0.0.1:8000/app/answer/", {"qs": qs.value})
        .then(res=>{
            loading.value = false
            qs.value = ""
            mes.value.push(`回答：${res.data.data}`)
            console.log(mes.value)
        })
        .catch(err=>{
            console.log(err)
            loading.value = false
            ElMessage.error("网络错误请重试！")
        })
    } else (
        ElMessage.error("提问的问题不能为空")
    )
}

</script>


<style scoped>
.chat-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

.chat-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.chat-input {
  flex: 1;
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
}

.chat-button {
  border-radius: 8px;
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  transition: background-color 0.3s, transform 0.2s;
}

.chat-button:hover {
  background-color: #66b1ff;
  transform: translateY(-2px);
}

.chat-messages {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-item {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: #eef5ff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message-content {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

.message-input {
  background-color: transparent;
  border: none;
  color: #333;
  font-size: 16px;
}
</style>